<!DOCTYPE html>
<html lang="zh">
<head>
</head>
<body class="gray-bg">
    
		<div class="row">
			<div class="col-sm-12 search-collapse">
			    <p class="select-title" style="margin-left: 20px;">SVG缩放<font color="red">（快捷键 先点击图片，然后按住alt键+鼠标滑轮）</font>：
			    	<button onclick="zoomOut()" class="btn btn-success btn-sm">+</button>
			    	<button onclick="zoomIn()" class="btn btn-success btn-sm">-</button>
			    </p>
				<div class="col-xs-12" th:utext="${svgContent}" style="overflow:auto;"></div>
			</div>
			
			
	</div>
	<th:block th:include="include :: footer" />
	 <script th:src="@{/svg/svg.js}"></script>
	 
	<script type="text/javascript">
		var w = this;
		document.onkeydown=function(event){
			var e = event || window.event || arguments.callee.caller.arguments[0];
				if(e && e.keyCode==18){ 
					w.ctrlDown = true;
				}
		};
		document.onkeyup=function(event){
			var e = event || window.event || arguments.callee.caller.arguments[0];
				if(e && e.keyCode==18){ 
					w.ctrlDown = false;
				}
		};
		
		windowAddMouseWheel();
		function windowAddMouseWheel() {
	    var scrollFunc = function (e) {
        e = e || window.event;
        if (e.wheelDelta) {  //判断浏览器IE，谷歌滑轮事件
            if (e.wheelDelta > 0) { //当滑轮向上滚动时
                //alert("滑轮向上滚动");
            		//alert(w.ctrlDown);
            		if (w.ctrlDown) {
            			zoomOut();
            		}
            }
            if (e.wheelDelta < 0) { //当滑轮向下滚动时
							//alert("滑轮向下滚动");
							//alert(w.ctrlDown);
            	if (w.ctrlDown) {
            		zoomIn();
           		}
            }
        } else if (e.detail) {  //Firefox滑轮事件
            if (e.detail> 0) { //当滑轮向上滚动时
                //alert("滑轮向上滚动");
            }
            if (e.detail< 0) { //当滑轮向下滚动时
                //alert("滑轮向下滚动");
            }
        }
	    };
	    //给页面绑定滑轮滚动事件
	    if (document.addEventListener) {
	        document.addEventListener('DOMMouseScroll', scrollFunc, false);
	    }
			//滚动滑轮触发scrollFunc方法
	    window.onmousewheel = document.onmousewheel = scrollFunc;
		}
		
		function zoomOut() {
     	var $svgRoot = $('#svgId');
     	$svgRoot.attr('width', ($svgRoot.attr('width').replace("%","")*1.1)+'%')
		}
		function zoomIn() {
			var $svgRoot = $('#svgId');
	     	$svgRoot.attr('width', ($svgRoot.attr('width').replace("%","")*0.9)+'%')
		}       
  </script>
</body>

</html>
